/**
 * Menus: Mixins
 */
@mixin menus-depth-levels( $max-depth, $extra-selector:"" ) {
	@for $i from 1 through $max-depth {
		&.depth-#{ $i } #{ $extra-selector } {
			margin-left: #{ $i * 2 }rem;
		}
	}
}
@mixin menus-depth-levels-undo( $max-depth, $extra-selector:"" ) {
	@for $i from 1 through $max-depth {
		&.depth-#{ $i } #{ $extra-selector } {
			margin-left: #{ $i * -2 }rem;
		}
	}
}


/**
 * Menus: Empty Content
 */
.manage-menus .empty-content {
	clear: both;
}

/**
 * Menus: Placeholders
 */
.menus__pickers,
.menus__menu-header,
.menus__items {
	.placeholder-text {
		color: transparent;
		background-color: lighten( $gray, 30% );
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}

.menus__picker label .placeholder-text {
	font-size: 10px;
}

.menus__picker-select-placeholder {
	display: block;
	padding: 23px 40px 10px 52px;

	.placeholder-text {
		font-size: 12px;
	}
}





/**
 * Menus: Pickers
 */
.menus__pickers {
	background-color: lighten( $gray, 30% );
	background-size: cover;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 3%;
	box-shadow: 0 -2px 0 lighten( $gray, 10% ) inset;

	@include breakpoint( "<480px" ) {
		margin-top: -8px;
	}
}

.menus__pickers-conjunction {
	float: left;
	height: 55px;
	font-size: 0.8em;
	line-height: 4.6;

	width: 10%;
	padding: 0;
	margin: 0;
	text-align: center;

	@include breakpoint( "<480px" ) {
		width: 100%;
		height: 30px;
		line-height: 2.3;
	}
}

.menus__picker {
	width: 45%;
	float: left;
	position: relative;
	background: $white; /* required for -moz-appearance below */

	@include breakpoint( "<480px" ) {
		width: 100%;
	}

	label,
	select {
		display: block;
		width: 100%;
		cursor: pointer;
	}

	label {
		pointer-events: none; /* click through :D */
		font-size: 0.8em;
		color: $gray;
		position: absolute;
		top: 10px;
		left: 10px;
		padding: 0px 30px 20px 42px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		width: calc(100% - 20px);


		&:before {
			position: absolute;
			left: 1px;
			top: 1px;
			color: $blue-dark;
		}

		&:after {
			@include noticon( '\f431', 22px );
			position: absolute;
			top: 7px;
			right: 0;
			color: $blue-medium;
		}
	}

	&.is-location label:before {
		@include noticon( '\f8a9', 32px );
	}

	&.is-menu label:before {
		@include noticon( '\f505', 32px );
	}

	select {
		background: $white;
		height: 55px;
		border: none;
		border-radius: 0;

		-webkit-appearance: none;
		padding: 20px 40px 5px 52px;

		&::-ms-expand {
			display: none; /* Remove arrow in IE */
		}
	}
}


/**
 * Menu: Header
 */
.menus__menu-header {
	display: flex;
	flex-direction: row;
	margin: 24px 8px 8px 16px;

	@include breakpoint( "<480px" ) {
		margin: 24px 8px 8px 16px;
	}

	.menus__menu-name {
		flex: 1 1 auto;
		width: 0%; /* Firefox 35 and IE 10 fix */
	}

	.menus__menu-actions {
		flex: 0 0 auto;
		margin-left: auto;
	}
}

.menus__menu-name {
	font-size: 1.6em;
	font-weight: 200;
	float: left;

	// The rendered field
	span.is-editable {

		span {
			display: block;
			float: left;
			max-width: calc( 100% - 20px );
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		a {
			margin-left: 4px;
			cursor: pointer;
			&:before {
				@include noticon( '\f411', 16px );
				color: darken( $gray, 10% );
				vertical-align: baseline;
			}
		}
	}

	// The same field, edited
	input.is-editable {
		margin: -20px -30px -20px 0;
		font-size: inherit;
		font-weight: inherit;
		width: calc(100% - 40px);
		margin-right: 40px;
		@include breakpoint( "<480px" ) {
			width: 100%;
		}
	}
}

.menus__menu-actions {
	float: right;

	.button {
		margin-left: 0.7em;

		&.noticon:before {
			line-height: 1.35;
			color: $gray-dark;

			/* Reset noticon parts overridden by button */
			font-size: 16px;
			font-weight: 400;
		}
	}
}


.is-editing-title {
	@include breakpoint( "<480px" ) {
		.menus__menu-name {
			line-height: 41px;
		}

		.menus__menu-actions {
			display: none;
		}
	}
}

/**
 * Menu: List
 */
.menus__items {
	margin: 0;
	clear: both;
	list-style-type: none;
	background-color: lighten( $gray, 30% );

	ul {
		padding: 0;

		&.depth-0 {
			margin-left: 0;
		}
	}
}

.menus__menu-item {
	@include menus-depth-levels( 7 );

	display: flex;
	flex-direction: row;
	color: $blue-dark;
	background-color: $white;
	text-decoration: none;
	border-bottom: 1px solid lighten( $gray, 30% );
	border-left: 1px solid lighten( $gray, 30% );
	padding: 17px 20px 16px 16px;
	font-size: 13px;
	cursor: default;
	position: relative;
	z-index: z-index( 'root', '.menus__menu-item' );

	.menu-item-name {
		flex: 1 1 auto;
		color: $gray-dark;
		font-size: 1.1em;
		line-height: 1.5em;
		font-family: inherit;
		text-align: left;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

		&:before {
			font-size: 16px;
			margin-right: 12px;
			color: $blue-medium;
			vertical-align: -2px;
		}

		&.noticon-placeholder:before {
			color: transparent;
			background-color: lighten( $gray, 30% );
			animation: loading-fade 1.6s ease-in-out infinite;

			vertical-align: -4px;
			font-size: 19px;
		}
	}

	.action-tray {
		flex: 0 0 auto;
		float: right;
		margin-right: -8px; /* compensate buttons padding, more universal */
		transition: background 200ms ease-in, color 50ms ease-in;

		/* Buttons */
		button {
			margin-left: 1em;
			margin-top: -8px;
			margin-bottom: -8px;
			font-size: inherit;
			line-height: 1.45;
		}

		.menu-item-action {
			float: left;
			color: darken( $gray, 10% );
			margin: -5px 0 -5px;
			padding: 8px 6px 8px;
			text-transform: uppercase;
			font-size: 0.85em;
			font-weight: 500;
			vertical-align: top;
			cursor: pointer;

			transition: all 200ms ease-out;
			border-radius: 100%;

			text-indent: -6666em;
			width: 22px; /* Fix: Firefox won't respect margins with text-indent on otherwise. */

			/* Icon Buttons */
			&:before {
				content: "";
				color: $blue-medium;
				float: left;
				font-size: 16px;
				text-indent: 0;
				width: 22px;
			}

			&.edit:before {
				@include noticon( '\f411', 16px );
			}

			&.add:before {
				@include noticon( '\f510', 16px );
			}

			&.cancel:before {
				@include noticon( '\f405', 16px );
				font-size: 19px;
				margin-bottom: -3px; /* Sigh it's smaller... */
			}

			&.move {
				color: $blue-medium;
				text-indent: 0;
				width: auto;

				&:hover {
					color: $blue-light;
					border-radius: 0;
					background: transparent;
				}
				&:before {
					content: none;
				}
			}

			&:hover,
			&:focus {
				color: $white;
				background: $blue-medium;
			}

			&:hover:before,
			&:focus:before {
				color: $white;
			}
		}
	}

	/**
	 * Menu item is selected
	 */
	&.is-selected {
		background: $blue-medium;
		padding: 6px;
		border-bottom: 0; /* remove gap */

		.noticon {
			color: $white;
			padding: 14px 16px 5px 10px;
		}

		input {
			width: calc(100% - 70px);
			padding: 12px 14px;
			border: 0;
			color: $blue-dark;
			font-size: 14px;
		}
	}

	/**
	 * Menu 3-pronged lander areas
	 */
	&.is-lander {
		background: lighten( $gray-light, 2% );
		border-left: 1px solid lighten( $gray, 30% );
		z-index: z-index( 'root', '.menus__menu-item.is-lander' );

		&:hover {
			background: $blue-medium;
		}
		&:hover span,
		&:hover span:before {
			color: $white;
		}

		span {
			color: $blue-dark;
			font-size: 1.1em;
			line-height: 1.5em;
			font-family: inherit;

			&:before {
				font-size: 16px;
				margin-right: 12px;
				color: $blue-medium;
				vertical-align: -2px;
			}
		}
	}

	/**
	 * Item target when dragging with mouse
	 */
	&.is-dragdrop-target {
		background: $gray-light;
		border: 1px dashed lighten( $gray, 20 );
		margin-top: 10px;
		margin-bottom: 10px;

		span {
			visibility: hidden;
		}

		.add,
		.edit {
			display: none;
		}
	}

	/**
	 * Hide drag 'ghost' image, because it makes the drop
	 * target hard to see
	 */
	&:-webkit-drag {
		visibility: hidden;

		div {
			display: none;
		}
	}

	/**
	 * Menu is Empty, show special add icon
	 */
	&.is-empty {
		margin-left: calc(100% - 61px);
		padding-left: 13px;
	}

	/**
	 * Item is to be deleted, pending user confirmation
	 */
	&.is-deleted {
		background: $gray-light;

		.menu-item-name,
		.menu-item-name::before {
			color: $gray;
		}
	}

	&.is-corrupt {
		border-left: 5px solid $alert-yellow;
	}
}


/**
 * Menu: add menu item label
 */
.menus__add-item-footer-label {
	float: right;
	padding: 10px 25px 2px 0;

	color: $gray;
	font-size: 10px;
	text-transform: uppercase;

	animation: menus__fade-from-bottom 1.0s ease-in-out;

	&:after {
		content: "\2191"; /* Up arrow */
		color: $blue-medium;
		font-size: 16px;
		padding: 0 0 0 10px;
	}
}


/**
 * Menu: Edit Item & New Item views
 */
.menus__menu-item-open-container {
	background: $gray-light;

	@include breakpoint( "<480px" ) {
		&.is-panel-left {
			.menu-item-options {
				display: none !important;
			}
		}

		&.is-panel-right {
			.menu-item-options {
				width: auto !important;
				left: 0 !important;
				border: 0 !important;
			}
		}
	}
}

.menus__menu-item-open {
	@include menus-depth-levels( 7 );
	@include menus-depth-levels-undo( 7, ".editable-item-content" );

	display: block;
	color: $blue-dark;
	background-color: $white;
	text-decoration: none;
	border-left: 1px solid lighten( $gray, 30% );

	&:before {
		/* The top arrow */
		margin-top: -17px;
		margin-left: 15px;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(255, 255, 255, 0);
		border-bottom-color: #ffffff;
		border-width: 9px;
		z-index: z-index( 'root', '.menus__menu-item-open:before' );
	}

	.editable-item-content {
		$editable-item-options-width: 75%;

		background: $white;
		border-top: 1px solid lighten( $gray, 30% );
		border-bottom: 1px solid lighten( $gray, 30% );

		/**
		 * General
		 */
		.separated {
			border-bottom: 1px solid lighten( $gray, 30% );
		}

		.separated:after {
			content: " ";
			display: block;
			height: 0;
			clear: both;
		}

		input:not([type='radio']):not([type='checkbox']) {
			display: block;
			font-size: 14px;
			margin: -1px 0;
			transition: all 200ms ease-out;
		}

		/**
		 * Menu Item Name
		 */
		.menus__menu-item-form-name {
			display: flex;
			flex-direction: row;

			label {
				flex: 0 0 auto;
				padding: 9px 12px;

				display: block;
				line-height: 2.4;
				color: $gray;
				font-size: 10px;
				text-transform: uppercase;
			}

			input {
				flex: 1 1 auto;
				width: $editable-item-options-width;
				background: $gray-light;
			}
		}

		/**
		* Menu Item Types
		*/
		.menus__menu-item-form-types {
			list-style: none;
			margin: 0;
			position: relative;
			width: 136px;

			&:hover {
				border-top-color: $gray-light;
				border-bottom-color: $gray-light;
			}

			@include breakpoint( "<480px" ) {
				width: 100%;
			}

			li {
				border: 0;
				border-top: 1px solid transparent;
				border-bottom: 1px solid transparent;
				border-right: 1px solid lighten( $gray, 30% );
				transition: all 200ms ease-in-out, color 150ms ease-in-out;

				& > label {
					font-family: inherit;
					font-size: 14px;
					padding: 16px 12px;
					color: $gray-dark;
					line-height: 1.3;
					display: block;
					text-align: left;
					margin-bottom: -1px;
					font-weight: 400;
					transition: all 250ms ease-in-out, color 150ms ease-in-out;
					cursor: pointer;
					-webkit-font-smoothing: inherit; /* Fix the noticon change */
					-moz-osx-font-smoothing: inherit; /* Fix the noticon change */

					&:before {
						color: lighten( $gray, 20% );
						font-size: 16px;
						margin-right: 8px;
						vertical-align: -3px;
						transition: all 250ms ease-in-out, color 150ms ease-in-out;
					}

					&:hover {
						color: $blue-medium;

						&:before {
							color: $blue-medium;
						}
					}
				}

				/**
				 * Selected states
				 */
				&.is-selected {
					border-top-color: lighten( $gray, 30% );
					border-bottom-color: lighten( $gray, 30% );
					border-right-color: $white;
					color: $gray-dark;

					@include breakpoint( "<480px" ) {
						border-top: 1px solid transparent;
						border-bottom: 1px solid transparent;
					}

					&:first-child {
						border-top-color: $white;
					}

					&:last-child {
						border-bottom-color: $white;
					}

					& > label {
						color: $blue-medium;

						&:before {
							color: $blue-medium;
						}
					}
				}
			}
		}

		.menus__types-and-options-container {
			position: relative;

			.menu-item-options {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				width: $editable-item-options-width;

				background: $white;
				font-size: 14px;
				padding: 10px 13px;

				&.menu-item-options__term-tree-selector {
					padding: 10px 0px 10px 13px;
					overflow-y: hidden;
					
					.term-tree-selector {
						border: 0;
					}

					.term-tree-selector__search input {
						border-width: 1px;
					}

					.term-tree-selector__label {
						color: $gray-dark;
						font-size: 14px;
					}

					.term-tree-selector__list-item.is-placeholder {
						width: 85%;

						.term-tree-selector__label {
							color: transparent;
						}
					}
				}

			  .menu-item-tag-container {
				margin: 10px;

				.menu-item-tag {
				  display: inline-block;
				  padding: 0 3px;
				  background-color: lighten( $gray, 20% );
				  color: $white;
				  font-size: 10px;
				  border-radius: 3px;
				  margin-left: 5px;
				  text-transform: uppercase;
				  vertical-align: middle;
				  letter-spacing: 0.02em;

				  &:first-of-type {
					margin-left: 0;
				  }
				}
			  }

			  li.create-new-item input[type=radio] + label {
			  	color: #87a6bc;
				font-style: italic;
			  }


				.menu-item-back-button {
					display: none;
					transition: 200ms all ease-in;

					a {
						display: block;
						font-family: inherit;
						font-size: 14px;
						color: lighten( $gray-dark, 5% );
						text-align: left;
						line-height: 1.3;
						background: $white;
						padding: 16px 12px 15px;
						margin: -10px -13px 10px;
						border-bottom: 1px solid lighten( $gray, 30% );
						-webkit-font-smoothing: inherit;

						&:before {
							color: $blue-light;
							font-size: 16px;
							margin-right: 8px;
							vertical-align: -3px;
						}
					}

					@include breakpoint( "<480px" ) {
						display: block;
					}
				}

				.menu-item-form-label {
					float: none;
					width: auto;
					border: 0;

					display: block;
					padding: 0 0 10px 0;
					color: $gray;
					font-size: 11px;
					font-weight: 600;
					text-transform: uppercase;
				}

				.menu-item-form-address {
					margin-bottom: 1rem;
				}

				input[type='checkbox'] + label {
					margin-left: 4px;
					color: $gray-dark;
				}

				li {
					padding: 2px 0;

					input[type=radio] + label {
						margin-left: 4px;
						transition: all 200ms ease-out;
						color: $gray-dark;

						&:hover {
							color: $blue-medium;
						}
					}
				}

				form > label {
					cursor: pointer;
				}

				input:not([type='radio']):not([type='checkbox']) {
					width: 95%;
				}

				.is-empty-content {
					color: $gray;

					a {
						color: $gray;
						text-decoration: underline;
					}
				}

				.search-container {
					position: relative;

					.gridicon {
						position: absolute;
						left: 0;
						padding: 9px 8px;
					}

					.search-box {
						right: 0;
						width: 100%;
						height: 35px;
						margin-bottom: 1rem;
						padding: 5px 5px 5px 30px;
						background: $white;

						-webkit-appearance: none;
					}
				}

				// Scroll
				overflow: hidden;
				overflow-y: auto;

				&::-webkit-scrollbar {
					width: 9px;
					height: 9px;
				}
				&::-webkit-scrollbar-button:start:decrement,
				&::-webkit-scrollbar-button:end:increment {
					display: block;
					height: 0;
					background-color: transparent;
				}
				&::-webkit-scrollbar-track-piece {
					background-color: transparent;
					-webkit-border-radius: 0;
					-webkit-border-bottom-right-radius: 8px;
					-webkit-border-bottom-left-radius: 8px;
				}
				&::-webkit-scrollbar-thumb:vertical,
				&::-webkit-scrollbar-thumb:horizontal {
					background-color: lighten( $gray, 20% );
					-webkit-border-radius: 8px;
					border: 1px solid $white;
				}
			}
		}


		/**
		 * A notice for unsupported item types
		 */
		.unsupported-notice {
			padding: 1em;

			h1 {
				color: $gray-dark;
				font-size: 16px;
				margin-bottom: 1em;
			}

			p, small {
				color: $gray;
			}

			p {
				font-size: 14px;
				margin-bottom: 0;
			}
		}
	}
}


/**
 * Menu: Item Action Buttons
 */
.menus__menu-item-actions {
	clear: both;
	padding: 0.5em;
	border-top: 1px solid lighten( $gray, 30% );
	text-align: right;

	.button {
		margin-left: 0.5em;

		&.noticon {
			// Noticon override
			font-family: inherit;
			-webkit-font-smoothing: inherit;
			color: #6f7a88; // Button color?

			&:hover {
				color: #324155; // Button color?
			}

			&:before {
				font-size: 16px;
				vertical-align: -3px;
				margin: 0px -3px -1px;
			}
		}
	}
}


/**
 * Menu: animations, pure CSS fade-ins
 */
@keyframes menus__fade-from-bottom {
	0% {
		opacity: 0.0; // Let's add a small delay
	}
	20% {
		opacity: 0.0;
		transform: translateY(10px);
	}
	70% {
		opacity: 1.0;
	}
	100% {
		opacity: 1.0;
		transform: none;
	}
}


/**
 * Menu: animations, ReactCSSTransitionGroup
 */
.menus__droptarget-slidevertical-enter,
.menus__droptarget-slidevertical-leave {
	transform: translateZ(0); /* Turns acceleration on if possible */

	&.menus__droptarget-slidevertical-enter-active,
	&.menus__droptarget-slidevertical-leave-active {
		/* Fix for Safari / Safari Mobile: the transition doesn't work unless it's on the *-active
		 * Reference:
		 *    https://github.com/facebook/react/issues/2227
		 *    https://github.com/facebook/react/issues/2104
		 */
		transition: margin 200ms ease-out, opacity 200ms ease-out;
	}

	&.is-lander {
		span {
			opacity: 0.0;
		}

		&:hover {
			background: inherit;
			color: inherit;
		}
	}
}

.menus__droptarget-slidevertical-enter {
	margin-top: -55px;
	opacity: 0.0;

	&.is-position-before {
		margin-top: 0;
		margin-bottom: -55px;
	}

	&.menus__droptarget-slidevertical-enter-active {
		margin-top: 0;
		opacity: 1.0;

		&.is-position-before {
			margin-bottom: 0;
		}
	}
}

.menus__droptarget-slidevertical-leave {
	margin-top: 0;
	opacity: 1.0;

	&.is-position-before {
		margin-bottom: 0;
	}

	&.menus__droptarget-slidevertical-leave-active {
		margin-top: -55px;
		opacity: 0.0;

		&.is-position-before {
			margin-top: 0;
			margin-bottom: -55px;
		}
	}
}
